<template>
  <div class="my-motion-container">
    <div align="center">
      <q-btn
        dense
        flat
        icon="add"
        color="primary"
        label="添加动效"
        @click="addNewMotionItem"
      />
    </div>
    <MotionItemInput
      :motion-type-arr="motionTypeList"
      :compare-operator-type-arr="operatorTypeList"
      :motion-list=selectedComponent.motionItem
      :variable-list="selectedComponent.dataItem"
      @data-info="updateMotionItem"
    />
  </div>
</template>

<script lang="ts">
import { defineAsyncComponent, defineComponent, onMounted, onUnmounted } from 'vue';
import { useEditorStore } from 'stores/editorStore';
import { storeToRefs } from 'pinia';
import { CMotionNode } from 'stores/editorModels';
import { useUivCatalogTbl } from 'src/hook/editor/useUivCatalogTbl';
import { uivCatalogType } from 'src/util/UivBaseConst';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';

const MotionItemInput = defineAsyncComponent(() => import('components/common/MotionItemInput.vue'));

export default defineComponent({
  name: 'ComponentMotionItem',
  components: {
    MotionItemInput
  },
  setup (props) {
    //store
    const store = useEditorStore();

    // 响应式数据解构
    const {
      selectedComponent
    } = storeToRefs(store);

    //*********************************************************************************************
    //      消息通知
    //*********************************************************************************************
    //消息通知
    const {
      showMessage
    } = useMessageNotify();

    //目录
    const {
      motionTypeList,
      operatorTypeList,
      getUivCatalog,
      removeUivCatalog
    } = useUivCatalogTbl();

    //增加数据节点
    const addNewMotionItem = () => {
      if ((selectedComponent.value) && (selectedComponent.value.motionItem.length < 3)) {
        //加入数组
        selectedComponent.value?.motionItem.push({
          id: 0,
          typeId: 0,
          variableId: 0,
          operatorId: 2,
          lowArg: 0,
          highArg: 0,
          period: 1,
          cycle: 5
        });
      } else {
        showMessage('动效超过3个！');
      }
    }

    //更新节点
    const updateMotionItem = (list: CMotionNode[]) => {
      if (selectedComponent.value?.motionItem) {
        selectedComponent.value.motionItem.length = 0;
        list.forEach((item) => {
          selectedComponent.value?.motionItem.push(item);
        });
      }
    }

    //挂载组件
    onMounted(() => {
      getUivCatalog(uivCatalogType.MOTION_TYPE_CODE);
      getUivCatalog(uivCatalogType.COMPARE_OPERATOR_TYPE_CODE);
    });

    //卸载组件
    onUnmounted(() => {
      removeUivCatalog(uivCatalogType.MOTION_TYPE_CODE);
      removeUivCatalog(uivCatalogType.COMPARE_OPERATOR_TYPE_CODE);
    });

    return {
      selectedComponent,
      motionTypeList,
      operatorTypeList,
      addNewMotionItem,
      updateMotionItem
    };
  }
});
</script>

<style lang="scss" scoped>
.my-motion-container {
  padding: 10px;
}
</style>
